<script setup lang="ts">
import { computed, ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import {img, redirect} from '@/utils/common';
import skuItem from './components/skuItem';
import { getRentInfo, getDeviceList } from '@/app/api/sku';
import MescrollEmpty from "@/components/mescroll/mescroll-empty/mescroll-empty.vue";
const detail = ref();
const shopList = ref();
const deviceList = ref([]);
onShow(() => {
	getDetail();
	getDevice();
});
const getDetail = async () => {
	let res: any = await getRentInfo();
	if (res.data) {
		detail.value = res.data;
	}
};
const getDevice = async () => {
	let res: any = await getDeviceList();
	if (res.data) {
		deviceList.value = res.data;
	}
};
// 申请提现
const applyCashOut = () => {
	if (detail.value.show === 'to_withdraw') {
		uni.setStorageSync('cashOutAccountType', 'money');
		redirect({ url: '/app/pages/member/apply_cash_out', param: { money: detail.value.rent_money, disabledChangeMoney: true } });
	}
};
</script>
<template>
	<view :style="themeColor()" class="bg-[rgb(247,247,247)] pb-[20rpx] min-h-[100vh]">
		<c-header url="/app/pages/rent/index" mode="redirectTo" />
		<view class="h-[626rpx] bg-gradient-to-b from-[#D0AA72] to-[#9A7A4B] mb-[15rpx] rounded-b-[20rpx] pt-[180rpx] box-border px-[28rpx] text-[#fff]" v-if="detail">
			<view class="">
				<view class="flex items-center text-[16px] mb-[10rpx]">
					<u-image :src="img('/upload/dyj/static/emptyWallet.png')" width="48rpx" height="48rpx" mode="aspectFill" class="mr-[20rpx]" />
					{{ detail.month_text }}份租金 (元)
				</view>
			</view>
			<view class="text-[72rpx] mt-[90rpx] flex items-center justify-center" @click="applyCashOut()" :class="detail.show === 'to_pay_rent' ? ['cursor-pointer'] : ''">
				{{ detail.show === 'withdrawed' ? '本月佣金已提现' : detail.rent_money }}
				<text v-if="detail.show === 'to_withdraw'" class="text-[42rpx] ml-[8rpx]">></text>
			</view>
			<view class="text-[28rpx] mt-[32rpx] text-center" v-if="detail.show === 'to_settlement'">本月待结算金额（含耗材）</view>
			<view class="text-[28rpx] mt-[32rpx] text-center" v-else-if="detail.show === 'to_withdraw'">本月可提现金额（含耗材）</view>
			<view class="text-[28rpx] mt-[60rpx] text-right">
				累计购买
				<text class="text-[36rpx]">{{ detail.device_count || 0 }}</text>
				台设备 每月
				<text class="text-[36rpx]">{{ detail.withdraw_date || 25 }}</text>
				日提现
			</view>
		</view>
		<view class="flex justify-between items-center px-[24rpx]">
			<view class="w-[42%] h-[144rpx] bg-[#9A7A4B] p-[20rpx] rounded-[20rpx]">
				<view
					class="h-full border-solid border-[#fff] rounded-[20rpx] flex items-center pl-[20rpx] cursor-pointer"
					@click="redirect({ url: '/app/pages/member/apply_cash_out' })"
				>
					<view class="w-[70rpx] h-[70rpx] mr-[20rpx] rounded-[20rpx] bg-[#fff] flex items-center justify-center">
						<u-image :src="img('/upload/dyj/static/wallet.png')" width="50rpx" height="50rpx" mode="aspectFill" />
					</view>
					<view>
						<view class="text-[28rpx] text-[#fff] mb-[10rpx]">我要提现</view>
						<view class="text-[20rpx] text-[#fff]">点击我要提现</view>
					</view>
				</view>
			</view>
			<view @click="redirect({ url: '/app/pages/sku/flow' })" class="w-[42%] h-[144rpx] bg-[#9A7A4B] p-[20rpx] rounded-[20rpx]">
				<view class="h-full border-solid border-[#fff] rounded-[20rpx] flex items-center pl-[20rpx]">
					<view class="w-[70rpx] h-[70rpx] mr-[20rpx]"><u-image :src="img('/upload/dyj/static/rightIcon.png')" width="70rpx" height="70rpx" mode="aspectFill" /></view>
					<view>
						<view class="text-[28rpx] text-[#fff] mb-[10rpx]">费用明细</view>
						<view class="text-[20rpx] text-[#fff]">查看费用明细清单</view>
					</view>
				</view>
			</view>
		</view>
		<view class="px-[24rpx]">
			<template v-for="(item, index) in deviceList" :key="`sku${index}`">
				<sku-item :item="item" type="index"/>
			</template>
		</view>
    <mescroll-empty
        :option="{'icon': img('addon/shop_fenxiao/sale/empty.png'), 'tip': '暂无设备'}"
        v-if="!deviceList.length"></mescroll-empty>
	</view>
</template>

<style lang="scss" scoped></style>
<style lang="scss"></style>
